<template>
		<view class="card">
			<view class="card-row">
				<div class="cardTop" @click="handleItem(item)">
					<div class="left icon">
						<img v-if="item.sort == 1 || item.rule_id == 1" style="width: 25px;" src="/static/icons/sun.svg" />
						<img v-else style="width: 25px;" src="/static/icons/sleep.svg" />
					</div>
					<view class="right card-title-row">
						<text class="card-title">Clock in</text>
						<text class="card-time">{{item.ruleTime || item.time_string}}</text>
						<carState :status="item.status" />
					</view>
				</div>
				
				<div class="cardTop">
					<div class="left icon">		
						<div class="inline-block">
							<uv-icon style="justify-content: center;" name="clock-fill" color="#D0D5DD" size="14"></uv-icon>
						</div>				
					</div>
					<view class="right card-detail">
						<text class="iconfont icon-clock"></text>
						<text class="card-detail-text">{{item.clock_time || item.log.clock_time}}</text>
					</view>
				</div>
				
				<div class="cardTop">
					<div class="left icon">
						<div class="inline-block">
							<uv-icon style="justify-content: center;" name="empty-address" color="#D0D5DD" size="14"></uv-icon>
						</div>	
					</div>
					<view class="right card-detail">
						<text class="iconfont icon-map"></text>
						<text class="card-detail-text">{{item.address || item.log.address || 'no Data'}}</text>
					</view>
				</div>
				<!-- <view class="card-icon">
					<view class="icon" style="margin-top: 0;">
						<img v-if="item.sort == 1 || item.rule_id == 1" style="width: 25px;" src="/static/icons/sun.svg" />
						<img v-else style="width: 25px;" src="/static/icons/sleep.svg" />
					</view>
					<view class="icon" style="margin-top: 10rpx">
						<uv-icon name="clock-fill" color="#D0D5DD" size="14"></uv-icon>
					</view>
					<view class="icon" style="margin-top: 28rpx">
						<uv-icon name="empty-address" color="#D0D5DD" size="14"></uv-icon>
					</view>
				</view>
				<view class="card-info">
					<view class="card-title-row">
						<text class="card-title">Clock in</text>
						<text class="card-time">{{item.ruleTime || item.time_string}}</text>
						<carState :status="1" />
					</view>
					<view class="card-detail">
						<text class="iconfont icon-clock"></text>
						<text class="card-detail-text">{{item.clock_time || item.log.clock_time}}</text>
					</view>
					<view class="card-detail">
						<text class="iconfont icon-map"></text>
						<text class="card-detail-text">{{item.address || item.log.address || 'no Data'}}</text>
					</view>
				</view> -->
			</view>
			<view class="tips" v-if="item.status > 2">
				<!-- 考勤异常不卡 -->
                 <span v-if="item.status == 5">Timecard replacement success</span>
                 <span v-else-if="item.status > 2">Apply for a replacement timecard</span>
			</view>
		</view>
</template>
<script>
import carState from './state.vue'
export default {
    props: {
      item: Object,
      required: true
    },
	components: {
		carState,
	},
	methods: {
		handleItem(item){
			// 如果item的状态为3或6
			if(item.status == 3 || item.status == 6){
				uni.$uv.route({
					url: '/pages/Home/cardReplacement',
					params: {
						id: item.id,
						type: 'cardReplacement',
						day: item.clock_time,
					}
				})
				return
			}
		}
	},
}
</script>
<style lang="scss" scoped>

.card-info {
    background: #fff;
	flex: 1;
    // padding: 24rpx 30rpx;
    position: relative;
    border-radius: 10px;
}


.card {
	background: #fff;
	border-radius: 28rpx;
	// margin-bottom: 24rpx;
	padding:  24rpx 32rpx;
	position: relative;
	box-shadow: 0 4rpx 24rpx #e6e6e6;
}

.card-row {
	.cardTop{
		display: flex;
		align-items: center;
		.left{
			width: 50rpx;
			text-align: center;
			margin-right: 24rpx;
		}

	}
}

.card-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;

	.icon {
		display: block;
		margin-top: 12rpx;
		text-align: center;

		.uv-icon {
			align-items: center;
			flex-direction: column;
		}
	}
}

.card-icon .sun {
	font-size: 32rpx;
	display: inline-block;
	width: 32rpx;
	height: 32rpx;
	color: #FFC300;
}

.card-info {
	flex: 1;
	margin-left: 18rpx;
}

.card-title-row {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
	margin-left: 4rpx;
}

.card-time {
	font-size: 24rpx;
	color: #bbb;
	margin-left: 12rpx;
}

.card-tag {
	font-size: 24rpx;
	color: #21C97A;
	background: #e6f7f0;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	margin-left: 18rpx;
}

.card-detail {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #555;
	margin-top: 12rpx;
}

.card-detail .iconfont {
	font-size: 18rpx;
	color: #bbb;
	margin-right: 8rpx;
}
.tips {
	font-weight: 500;
	font-size: 26rpx;
	color: #477CC2;
	line-height: 38rpx;
	text-align: center;
	margin-top: 20rpx;
}
</style>